<template>
  <div ref="refChart" :style="{ height: kHFour + 'px'}"></div>
</template>

<script>
import theme from '../../assets/theme/theme'

export default {
  name: 'C4',
  data() {
    return {
      chartInstance: null,
      allData: [],
      kHFour: null,
      // 屏幕自适应定时器
      screenTimer: null,
      // 数据刷新定时器
      dataTimer: null,
      // 获取浏览器可视区域高度（包含滚动条）、 window.innerHeight
      // 获取浏览器可视区域高度（不包含工具栏高度）、document.documentElement.clientHeight
      // 获取body的实际高度  (三个都是相同，兼容性不同的浏览器而设置的) document.body.clientHeight
      screenHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      screenWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    }
  },
  beforeMount() {
    this.kHFour = Math.round(this.screenHeight * 0.44)
  },
  mounted() {
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenWidth, false);
    this.resizeScreen();
    // 图表初始化
    this.initChart();
    // 屏幕自适应
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
    // 数据刷新定时器
    this.getDataTimer();
  },
  beforeDestroy() {
    // 销毁Echarts图表
    this.chartInstance.dispose();
    this.chartInstance = null;
  },
  destroyed() {
    // 清除自适应屏幕定时器
    clearInterval(this.screenTimer);
    this.screenTimer = null;
    // 清除数据刷新定时器
    clearInterval(this.dataTimer);
    this.dataTimer = null;
    // 页面大小改变时触发
    window.removeEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.removeEventListener('resize', this.getScreenWidth, false);
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    resizeScreen() {
      this.screenTimer = setInterval(() => {
        this.getScreenHeight();
        this.getScreenWidth();
      }, 200)
    },
    // 获取浏览器高度进行自适应
    getScreenHeight() {
      this.screenHeight = window.innerHeight || document.documentElement.innerHeight || document.body.clientHeight;
      // 四舍五入取整数
      this.kHFour = Math.round(this.screenHeight * 0.44);
    },
    // 字体大小根据宽度自适应
    getScreenWidth() {
      this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    },
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.refChart, theme, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      const initOption = {
        title: {
          text: '汉口银行授信统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          top: '5%',
          data: [
            '节能环保产业',
            '清洁生产产业',
            '清洁能源产业',
            '生态环境产业',
            '基础设施',
            '绿色服务'
          ]
        },
        grid: {
          // show: true,
          top: '20%',
          left: '1%',
          right: '2%',
          bottom: '5%',
          // containLabel: true
          // backgroundColor: "rgba(224, 17, 17, 1)",
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              inside: false,
              textStyle: {
                fontSize:'10',
              }
            },
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: false, // 不显示坐标轴上的文字
            },
            splitLine:{
              show:false // 不显示网格线
            },
          }
        ],
        series: [
          {
            name: '节能环保产业',
            type: 'line',
            // stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220]
          },
          {
            name: '清洁生产产业',
            type: 'line',
            // stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [210, 220, 230, 240, 250, 260, 270, 280, 290, 300, 310, 320]
          },
          {
            name: '清洁能源产业',
            type: 'line',
            // stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [330, 340, 350, 360, 370, 380, 390, 400, 410, 420, 430, 440]
          },
          {
            name: '生态环境产业',
            type: 'line',
            // stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [510, 620, 630, 640, 650, 560, 570, 580, 590, 600, 610, 620]
          },
          {
            name: '基础设置',
            type: 'line',
            // stack: 'Total',
            // label: {
            //   show: true,
            //   position: 'top'
            // },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [710, 720, 730, 740, 750, 760, 770, 780, 790, 800, 800, 820]
          },
          {
            name: '绿色服务',
            type: 'line',
            // stack: 'Total',
            // label: {
            //   show: true,
            //   position: 'top'
            // },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [910, 920, 930, 940, 950, 960, 970, 980, 990, 1000, 1100, 1200]
          }
        ]
      }
      // 图表初始化配置
      this.chartInstance.setOption(initOption);
    },
    screenAdapter() {
      this.titleFontSize = (this.$refs.refChart.offsetWidth / 100) * 1.8;
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 1.5),
          },
        },
        // 圆点分类标题
        legend: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 1.5),
          },
        }
      };
      // 图标自适应变化配置
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    // 定时器
    getDataTimer() {
      this.dataTimer = setInterval(() => {
        // 执行刷新数据的方法
        // this.getData();
      }, 5000)
    }
  }
}
</script>
